<template>
	<view class="app">
		<view class="scroll-box" id="scroll-box">
			<scroll-view class="left" :scroll-into-view="leftIntoView" scroll-with-animation scroll-y >
				<view v-for="(item,index) in length" :id="'left-'+index" :class="['item' , index==leftTabIndex?'item-acitve': '']" @click="changeScroll(index)" :key="index">{{index}}</view>
			</scroll-view>
			
			<scroll-view class="right" scroll-with-animation scroll-y @scroll="mainScroll" :scroll-into-view="scrollInto">
				<view v-for="(item,index) in length" :key="index" class="main-item" :id="'item-'+index">
					<view class="item-tit">标题 - {{index}}</view>
					<view v-for="(ite,ind) in 30" :key="ind"> {{ind}} </view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				scrollTopSize:0,
				leftTabIndex: 0  ,// 左边的下标
				length:20,
				topArr:[],
				scrollInto:'',
			}
		},
		mounted() {
			this.$nextTick(()=>{
				setTimeout(()=>{
					this.initScrollView().then(()=>{
						this.getElementTop();
					})
				},200);
			})
		},
		computed:{
			/* 计算左侧滚动位置定位 */
			leftIntoView(){
				return `left-${this.leftTabIndex > 3 ? (this.leftTabIndex-3):0}`;
			}
		},
		methods:{
			/* 初始化滚动区域 */
			initScrollView(){
				return new Promise((resolve, reject)=>{
					let scroll = uni.createSelectorQuery().select('#scroll-box');
					scroll.boundingClientRect(res => {
						this.scrollTopSize = res.top;
						this.$nextTick(()=>{
							resolve();
						})
					}).exec();
				});
			},
			// 点击左边的导航
			changeScroll(index){
				// this.leftTabIndex = index
				this.scrollInto=`item-${index}`;
			},
			
			/* 获取元素顶部信息 */
			getElementTop(index=0){
				new Promise((resolve,reject)=>{
					let view = uni.createSelectorQuery().selectAll('.main-item');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then((res)=>{
					let topArr = res.map((item)=>{
						return item.top - this.scrollTopSize;	/* 减去滚动容器距离顶部的距离 */
					});
					console.log(topArr)
					this.topArr = topArr;
				});
			},
			/* 主区域滚动监听 */
			mainScroll(e){
				let top =e.detail.scrollTop;
				let index=0;
				/* 查找当前滚动距离 */
				for(let i = (this.topArr.length-1);i>=0;i--){
					if((top+2)>=this.topArr[i]){
						index = i;
						break;
					}
				}
				this.leftTabIndex=(index < 0 ? 0: index);
			}
		}
	}
</script>

<style scoped lang="scss">
	page,.app{
		/* #ifdef H5 */
		height: 100%;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */		
	}
	.app{
		.scroll-box{height: 100%;display: flex;align-items: flex-start;
			.left{flex: none;width: 200rpx;background: #ededed;height: 100%;
				.item{height: 80rpx;padding-left: 20rpx;box-sizing: border-box;display: flex;align-items: center;border-bottom: 1px solid #ddd;
					&-acitve{background: #dfdfdf;}
				}
			}
			.right{flex: 1;height: 100%;
				.main-item{background: #f6f6f6;
					.item-tit{position: sticky;top: 0;left: 0;right: 0;background: red;height: 60rpx;color: #333;background: #ddd;;line-height: 60rpx;}
				}
			}
		}
	}
	
	.color{color: #73acf1;}
</style>
